<template>
  图例:
  <el-button
    size="mini"
    style="background-color: var(--el-color-danger-lighter)"
    >红色挂科</el-button
  >
  <el-button
    size="mini"
    style="background-color: var(--el-color-success-lighter)"
    >绿色通过</el-button
  >
  <el-button
    size="mini"
    style="background-color: var(--el-color-warning-lighter)"
    >黄色未编写成绩</el-button
  >
  <el-dialog v-model="chakan" title="通过详情" @close="closeDialog">
    <el-table :data="xiangqing">
      <el-table-column label="ID" prop="chengjiid" width="80"></el-table-column>
      <el-table-column
        label="课程名称"
        prop="kname"
        width="200"
      ></el-table-column>
      <el-table-column label="分数" prop="fenshu" width="150"></el-table-column>
      <el-table-column
        label="任课教师姓名"
        prop="tname"
        width="200"
      ></el-table-column>
      <el-table-column align="right"> </el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="chakan = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
  <el-table
    :data="tableData.slice((currentPage4 - 1) * size, currentPage4 * size)"
    :row-class-name="tableRowClassName"
  >
    <el-table-column label="ID" prop="chengjiid" width="80"></el-table-column>
    <el-table-column
      label="学生姓名"
      prop="sname"
      width="185"
    ></el-table-column>
    <el-table-column
      label="班级名称"
      prop="bname"
      width="185"
    ></el-table-column>
    <el-table-column
      label="课程名称"
      prop="kname"
      width="185"
    ></el-table-column>
    <el-table-column label="分数" prop="fenshu" width="185"></el-table-column>
    <el-table-column
      label="任课教师姓名"
      prop="tname"
      width="185"
    ></el-table-column>
    <el-table-column align="right">
      <template #header>
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入课程名称关键字后单击回车搜索"
          @keyup.enter="mohuchaxun"
        />
      </template>
      <template #default="scope">
        <el-button size="mini" type="success" v-if="scope.row.fenshu >= 60"
          >通过</el-button
        >
        <el-button size="mini" type="danger" v-if="scope.row.fenshu < 60"
          >挂科</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <span class="demonstration"></span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10, 25]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
const axios = require("axios");
export default {
  name: "Chaxunchengji",
  data() {
    return {
      total: 0,
      size: 10,
      currentPage4: 1,
      search: "",
      chakan: false,
      xiangqing: [],
      s_xuehao: "",
      tableData: [
        {
          chengjiid: "",
          fenshu: "",
          kname: "",
          sname: "",
          tname: "",
          bname: "",
        },
      ],
    };
  },
  // computed: {
  //   tableRowClassName: function (row) {
  //     if (row.row.fenshu < 60) {
  //       return "warning-row";
  //     } else if (row.row.fenshu >= 60) {
  //       return "success-row";
  //     } else if (row.row.fenshu == "") {
  //       return "weishangfen-row";
  //     }
  //     return "";
  //   },
  // },
  computed: {
    // 计算属性的 getter
    
  },
  methods: {
    // tableRowClassName:function(row) {
    //     if (row.row.fenshu < 60) {
    //       return 'warning-row'
    //     } else if (row.row.fenshu >= 60) {
    //       return 'success-row'
    //     }else if(row.row.fenshu == ""){
    //       return 'weishangfen-row'
    //     }
    //     return ''
    //   },
    tableRowClassName({row,rowIndex}) {
      // `this` 指向 vm 实例
      if (row.fenshu < 60) {
        return "warning-row";
      } else if (row.fenshu >= 60) {
        return "success-row";
      } else if (row.fenshu == "") {
        return "weishangfen-row";
      }
      return "";
    },
    handleSizeChange: function (size) {
      this.size = size;
    },
    handleCurrentChange: function (currentPage4) {
      this.currentPage4 = currentPage4;
    },
    //关闭弹框的事件
    closeDialog() {
      this.xiangqing = []; //清空数据
    },
    mohuchaxun() {
      let _this = this;
      axios
        .get("https://localhost:44391/api/student/mohuchengji", {
          params: {
            mohu: _this.search,
            sxuehao: _this.s_xuehao,
          },
        })
        .then(function (response) {
          console.log(response);
          _this.tableData = response.data;
        });
    },
    chaxun() {
      let _this = this;
      if (this.s_xuehao == "") {
        this.$router.push({ path: "/" });
      } else {
        axios
          .get("https://localhost:44391/api/student/chaxunid", {
            params: {
              sxuehao: this.s_xuehao,
            },
          })
          .then(function (chaxun) {
            console.log(chaxun.data);
            //   _this.xiangqing = chaxun.data;
            //将数据类型转换成数组，push到数组里
            //   _this.xiangqing.push(chaxun.data);
            _this.tableData = chaxun.data;
            _this.total = chaxun.data.length;
          });
      }
    },
    chaxunid(id) {
      let _this = this;
      axios
        .get("https://localhost:44391/api/student/teacherid", {
          params: {
            id: id,
          },
        })
        .then(function (chaxun) {
          console.log(chaxun.data);
          //   _this.xiangqing = chaxun.data;
          //将数据类型转换成数组，push到数组里
          _this.xiangqing.push(chaxun.data);
          //  _this.xiangqing = chaxun.data;
          //   if(chaxun.data.fenshu>=60){
          //     _this.xiangqing.tongguo = "通过"
          //   }else{
          //        _this.xiangqing.tongguo = "挂科"
          //   }
        });
    },
  },
  mounted() {
    this.s_xuehao = this.$store.state.s_xuehao;
    this.chaxun();
  },
};
</script>

<style scoped>
.el-table >>> .warning-row {
  --el-table-tr-background-color: var(--el-color-danger-lighter);
}
.el-table >>> .success-row {
  --el-table-tr-background-color: var(--el-color-success-lighter);
}
.el-table >>> .weishangfen-row {
  --el-table-tr-background-color: var(--el-color-warning-lighter);
}
</style>